<template>
	<view class="container">
		<image class="header-img" :src="vipInfo.LevelImage"></image>
		<view class="header-list">
			<!-- <image style="width: 40rpx;height: 40rpx;margin-left: 20rpx;" src="../../../static/images/vip-green.png"></image> -->
			<text style="margin-left: 20rpx;">VIP 等级</text>
			<text style="margin-left: auto;margin-right: 20rpx;">{{ vipInfo.LevelName }}</text>
		</view>
		<view class="header-list">
			<text style="margin-left: 20rpx;">价格</text>
			<text class="header-price-content" style="margin-left: auto;margin-right: 20rpx;">{{ vipInfo.LevelValue | formatMoneyRmbUnit }}</text>
		</view>
		<!-- 	<view class="header-price">
			<text class="header-price-title">价格：</text>
			<text class="header-price-content">{{ vipInfo.LevelValue | formatMoneyRmbUnit }}</text>
		</view> -->
		<view class="header-buy bottom-change-view" @click="$noMultipleClicks(submitOrder)">购买</view>
		<scroll-view class="content" v-html="vipInfo.LevelRights"></scroll-view>
	</view>
</template>

<script>
import { isLogin, toLogin, formatTime, successToShow, errorToShow } from '@/config/common.js';
import { getVipLevelDetailInfo } from '@/constant/vip.js';
export default {
	data() {
		return {
			levelId: '',
			vipInfo: {},
			orderInfo: {
				CustomerId: uni.getStorageSync('customerId'),
				StoreId: '',
				VipLevelId: '',
				Fee: '',
				GuestRoomTypeId: '',
				StoreId: '',
				Channel: 4,
				Remark: '',
				LevelName: ''
			},
			noClick: true
		};
	},
	onLoad: function(option) {
		if (option.levelId) {
			this.levelId = option.levelId;
			this.orderInfo.VipLevelId = this.levelId;
			this.getDetailInfo();
		}
	},
	methods: {
		async getDetailInfo() {
			let result = await getVipLevelDetailInfo({
				Id: this.levelId
			});
			this.vipInfo = result;
			this.orderInfo.Fee = result.LevelValue;
			this.orderInfo.LevelName = result.LevelName;
			this.goodsInfo = result;
			this.vipInfo.LevelRights = this.vipInfo.LevelRights.replace(/style=""/gi, 'style="max-width:100%;" ');
			this.vipInfo.LevelRights = this.vipInfo.LevelRights.replace(/\<img/gi, '<img style="max-width:100%;" ');
		},
		async submitOrder() {
			uni.navigateTo({
				url: '../confirmVipOrder/index?orderInfo=' + encodeURIComponent(JSON.stringify(this.orderInfo))
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	background-color: $main-page-color;
	height: 100vh;
}

.header-img {
	width: 750rpx;
	height: 650rpx;
	margin-bottom: 20rpx;
}
.header-buy {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: $main-theme-color-green;
	height: 80rpx;
	width: 710rpx;
	color: #ffffff;
	font-size: 32rpx;
	color: #fff;
	margin: 20rpx;
	border-radius: 8rpx;
	margin-top: 40rpx;
}

.station-container {
	margin: 20rpx;
	display: flex;
	align-items: center;
	font-size: 30rpx;

	&-content {
		width: 500rpx;
		margin-left: auto;
	}
}

.header-list {
	display: flex;
	height: 100rpx;
	width: 100%;
	align-items: center;
	background-color: #fff;
	color: $main-text-color-gray-33;
	font-size: $main-text-size-32;
}

.header-price-content {
	color: $main-text-color-main-orange;
}
</style>
